<template>
  <div ref="chart" style="width: 100%; height: 3000px;"></div>
</template>

<script>
// import * as echarts from "echarts";
import * as echarts from 'echarts';
import { nextTick } from 'vue';
export default {
    props: {
    schoolProp: null,
    admissionNumbers :null,
    textName:String
  },
  async mounted() {
    setTimeout(async () => {
        await nextTick();
    this.$nextTick(() => {
        this.echarts();
  });
    }, 100);
  },

  methods: {
  async echarts(){
    // console.log(this.schoolProp)
    // console.log(this.admissionNumbers)
    let chart = echarts.getInstanceByDom(this.$refs.chart);
    chart = echarts.init(this.$refs.chart);
    const option = {
  title: {
    text: this.textName
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: this.schoolProp[0]
  },
  series: [
    {
      name: '2020',
      type: 'bar',
      data: this.admissionNumbers[0]
    },
    {
      name: '2021',
      type: 'bar',
      data: this.admissionNumbers[1]
    },
    {
      name: '2022',
      type: 'bar',
      data: this.admissionNumbers[2]
    },
    {
      name: '2023',
      type: 'bar',
      data: this.admissionNumbers[3]
    },
    {
      name: '2024',
      type: 'bar',
      data: this.admissionNumbers[4]
    },
  ]
    };
    chart.setOption(option)
  }
}
};
</script>

<style>

</style>